import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { argTypesView } from "./helpers/helpers";

export const flexDocs= { source: { code: `flexLayout := component.NewFlexLayout("Summary")
flexLayout.AddSections([]component.FlexLayoutSection{
  {
    {
      Width: component.WidthFull,
      View: component.NewSummary("Metadata", component.SummarySections{
        {
          Header:  "Full Width",
          Content: component.NewText("sample text"),
        },
      }...),
    },
    {
      Width: component.WidthHalf,
      View: component.NewSummary("Metadata", component.SummarySections{
        {
          Header:  "Half Width",
          Content: component.NewText("sample text"),
        },
      }...),
    },
    {
      Width: component.WidthQuarter,
      View: component.NewSummary("Metadata", component.SummarySections{
        {
          Header:  "Quarter Width",
          Content: component.NewText("sample text"),
        },
      }...),
    },
  },
}...)
flexLayout.SetAlert(component.NewAlert(component.AlertStatusInfo, component.AlertTypeDefault, "Info alert", false, nil))
`
}};

export const sampleText = {
  config: {
    value: 'sample text',
  },
  metadata: {
    type: 'text',
  },
};

export const summaryItemFull = {
  header: 'Full Width',
  content: sampleText,
};

export const summaryItemHalf = {
  header: 'Half Width',
  content: sampleText,
};

export const summaryItemQuarter = {
  header: 'Quarter Width',
  content: sampleText,
};

export const summaryFull = {
  config: {
    sections: [summaryItemFull],
    actions: [],
  },
  metadata: {
    type: 'summary',
  },
};

export const summaryHalf = {
  config: {
    sections: [summaryItemHalf],
    actions: [],
  },
  metadata: {
    type: 'summary',
  },
};

export const summaryQuarter = {
  config: {
    sections: [summaryItemQuarter],
    actions: [],
  },
  metadata: {
    type: 'summary',
  },
};

export const sectionFull = {
  width: 24,
  height: null,
  view: summaryFull,
};

export const sectionHalf = {
  width: 12,
  height: null,
  view: summaryHalf,
};

export const sectionQuarter = {
  width: 6,
  height: null,
  view: summaryQuarter,
};

export const alertConfig = {
  status: 'info',
  type: 'default',
  message: 'Info Alert'
};

export const flexView = {
  config: {
    sections: [[sectionFull, sectionHalf, sectionQuarter, sectionQuarter]],
    buttonGroup: null,
    alert: alertConfig
  },
  metadata: {
    type: 'flexlayout',
  },
};

export const FlexlayoutStoryTemplate = args => ({
  template: `<app-view-flexlayout [view]= "view"></app-view-flexlayout>`,
  argTypes: argTypesView,
  props: { view: args.view },
});

<h1>Flex Layout component</h1>
<h2>Description</h2>

<p>A Flex Layout component is used to provide a vertical layout for its child components.
The layout can be divided into three possible widths: full, half, and quarter.</p>

<p>A Flex Layout can optionally show an alert on the top of the component.</p>

<h2>Example</h2>

<Meta title="Components/Flex Layout" argTypes = { argTypesView }/>

<Canvas withToolbar>
  <Story name="Flex Layout component"
         parameters={{ docs: flexDocs }}
         args= {{ view: flexView }}>
    { FlexlayoutStoryTemplate.bind({}) }
  </Story>
</Canvas>

<h2>Props</h2>
<ArgsTable story = "Flex Layout component" />
